<template>
  <div id="app">
    <!-- 樱园漫步 -->
    <div class="yymb">
      <div class="wapper">
        <div class="top">
          <img src="../assets/imgs/yymb.png" alt="" />
          <span @click="changeRouter('/yhj/Page1')">更多+</span>
        </div>

        <div class="bottom">
          <div v-for="item in workList[0]" :key="item.id" class="workItems">
            <el-image
              :src="item.url"
              :title="item.title"
              class="img"
              @click="showDetail(item.id)"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 书法与绘画 -->
    <div class="readAndPaint">
      <div class="wapper">
        <!-- 樱书法 -->
        <div class="left">
          <div class="top">
            <img src="../assets/imgs/ysf.png" alt="" />
            <span @click="changeRouter('/yhj/Page2')">更多+</span>
          </div>
          <div class="bottom">
            <div v-for="item in workList[1]" :key="item.id" class="workItems">
              <el-image
                :src="item.url"
                :title="item.title"
                class="img"
                @click="showDetail(item.id)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
        <!-- 樱绘画 -->
        <div class="right">
          <div class="top">
            <img src="../assets/imgs/yhh.png" alt="" />
            <span @click="changeRouter('/yhj/Page3')">更多+</span>
          </div>
          <div class="bottom">
            <div v-for="item in workList[2]" :key="item.id" class="workItems">
              <el-image
                :src="item.url"
                :title="item.title"
                class="img"
                @click="showDetail(item.id)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 社团 -->
    <div class="yst">
      <div class="wapper">
        <div class="top">
          <img src="../assets/imgs/yst.png" alt="" />
          <span @click="changeRouter('/yhj/Page4')"><span>更多+</span></span>
        </div>

        <div class="bottom">
          <div v-for="item in workList[3]" :key="item.id">
            <el-image
              :src="item.url"
              :title="item.title"
              class="img"
              @click="showDetail(item.id)"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 摄影 -->
    <div class="sheyin">
      <div class="wapper">
        <div class="left">
          <div class="top">
            <img src="../assets/imgs/ysy.png" alt="" />
            <span @click="changeRouter('/yhj/Page5')">更多+</span>
          </div>
          <div class="bottom">
            <el-carousel :interval="4000" type="card" height="450px">
              <el-carousel-item v-for="item in workList[4]" :key="item.id">
                <el-image
                  fit="fill"
                  :src="item.url"
                  :title="item.title"
                  class="img"
                  @click="showDetail(item.id)"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

    <!-- 诗词 -->
    <div class="ysc">
      <div class="wapper">
        <div class="top">
          <img src="../assets/imgs/ysc.png" alt="" />
          <span @click="changeRouter('/yhj/Page6')"><span>更多+</span></span>
        </div>

        <div class="bottom">
          <div v-for="item in workList[5]" :key="item.id">
            <el-image
              :src="item.url"
              :title="item.title"
              class="img"
              @click="showDetail(item.id)"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMainPageWorks } from "../api/api";
export default {
  data() {
    return {
      workList: [],
    };
  },
  mounted() {
    this.getMainPageWorks();
  },
  methods: {
    async getMainPageWorks() {
      let res = await getMainPageWorks();
      this.workList = res.data.list;
      console.log("this.workList", this.workList);
    },
    showDetail(id) {
      this.$router.push({
        name: "Details",
        params: {
          id,
        },
      });
    },
    changeRouter(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
//baseCss
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

ul,
ol {
  list-style: none;
}

em,
i {
  font-style: normal;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: middle;
}

input {
  border: none;
  outline: none;
  color: #333;
}

#app {
  background-image: url(../assets/imgs/bgi.png);
  background-size: cover;
  user-select: none;
  .yymb {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 509px;
    background-color: rgb(241, 237, 234);
    opacity: 0.92;
    .wapper {
      width: 1200px;
      height: 100%;

      .top {
        display: flex;
        justify-content: space-between;
        margin-top: 35px;
        width: 100%;
        height: 50px;
        span {
          cursor: pointer;
          display: block;
          width: 60px;
          height: 20px;
          color: #ef7a97;
        }
        span:hover {
          color: #f3164d;
        }
      }

      .bottom {
        display: flex;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 300px;
          height: 335px;
          padding-top: 27px;
          background-image: url(https://www.wust.edu.cn/_upload/tpl/01/2d/301/template301/images/lbbj.png);
          background-repeat: no-repeat;
          .img {
            width: 240px;
            cursor: pointer;
            height: 190px;
            margin-right: 7px;
          }
          span {
            font-size: 18px;
            cursor: pointer;
            padding-top: 40px;
            text-align: center;
            color: #fe4fb0;
            line-height: 25px;
          }
          span:hover {
            color: #fa275c;
          }
        }
      }
    }
  }

  //书法和绘画
  .readAndPaint {
    display: flex;
    justify-content: center;
    background-color: rgb(251, 224, 233);
    opacity: 0.92;
    width: 100%;
    height: 568px;
    .wapper {
      display: flex;
      width: 1200px;
      height: 100%;
      .left {
        padding-top: 35px;
        width: 600px;
        height: 100%;
        .top {
          display: flex;
          justify-content: space-between;
          span {
            cursor: pointer;
            display: block;
            width: 60px;
            height: 20px;
            color: #ef7a97;
          }
          span:hover {
            color: #fa275c;
          }
        }
        .bottom {
          padding-top: 15px;
          display: flex;
          flex-wrap: wrap;
          .workItems {
            display: flex;
            flex-direction: column;
            width: 280px;
            height: 200px;
            border: 4px solid rgb(239, 122, 151);
            margin-bottom: 20px;
            margin-left: 13px;
            .img {
              padding-top: 10px;
              cursor: pointer;
              padding-left: 30px;
              width: 240px;
              height: 140px;
            }
            span {
              margin-top: 20px;
              font-size: 18px;
              cursor: pointer;
              text-align: center;
              color: #fe4fb0;
              line-height: 25px;
            }
            span:hover {
              color: #fa275c;
            }
          }
        }
      }
      .right {
        padding-top: 35px;
        width: 600px;
        height: 100%;
        .top {
          display: flex;
          justify-content: space-between;
          span {
            cursor: pointer;
            display: block;
            width: 60px;
            height: 20px;
            color: #ef7a97;
          }
          span:hover {
            color: #fa275c;
          }
        }
        .bottom {
          padding-top: 15px;
          display: flex;
          flex-wrap: wrap;
          .workItems {
            display: flex;
            flex-direction: column;
            width: 280px;
            height: 200px;
            border: 4px solid rgb(239, 122, 151);
            margin-bottom: 20px;
            margin-left: 13px;
            .img {
              padding-top: 10px;
              width: 240px;
              height: 140px;
              cursor: pointer;
              padding-left: 30px;
            }
            span {
              margin-top: 20px;
              font-size: 18px;
              cursor: pointer;
              text-align: center;
              color: #fe4fb0;
              line-height: 25px;
            }
            span:hover {
              color: #fa275c;
            }
          }
        }
      }
    }
  }

  // 社团
  .yst {
    display: flex;
    justify-content: center;
    opacity: 0.92;
    width: 100%;
    height: 509px;
    background-color: rgb(241, 237, 234);
    .wapper {
      width: 1200px;
      height: 100%;

      .top {
        display: flex;
        justify-content: space-between;
        margin-top: 35px;
        width: 100%;
        height: 50px;
        span {
          cursor: pointer;
          display: block;
          width: 60px;
          height: 20px;
          color: #ef7a97;
        }
        span:hover {
          color: #fa275c;
        }
      }

      .bottom {
        display: flex;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 300px;
          height: 335px;
          padding-top: 27px;
          background-image: url(https://www.wust.edu.cn/_upload/tpl/01/2d/301/template301/images/lbbj.png);
          background-repeat: no-repeat;
          .img {
            width: 240px;
            height: 190px;
            cursor: pointer;
            margin-right: 7px;
          }
          span {
            margin-top: 33px;
            font-size: 18px;
            cursor: pointer;
            text-align: center;
            color: #fe4fb0;
            line-height: 25px;
          }
          span:hover {
            color: #fa275c;
          }
        }
      }
    }
  }

  .sheyin {
    display: flex;
    justify-content: center;
    background-color: rgb(251, 224, 233);
    opacity: 0.92;
    width: 100%;
    height: 580px;
    .wapper {
      width: 1200px;
      height: 370px;
      .top {
        display: flex;
        justify-content: space-between;
        margin-top: 35px;
        width: 100%;
        height: 50px;
        span {
          cursor: pointer;
          display: block;
          width: 60px;
          height: 20px;
          color: #ef7a97;
        }
        span:hover {
          color: #fa275c;
        }
      }
    }
  }

  .ysc {
    display: flex;
    justify-content: center;
    opacity: 0.92;
    width: 100%;
    height: 655px;
    background-color: rgb(241, 237, 234);
    .wapper {
      width: 1200px;
      height: 100%;

      .top {
        display: flex;
        justify-content: space-between;
        margin-top: 35px;
        width: 100%;
        height: 50px;
        span {
          display: block;
          cursor: pointer;
          width: 60px;
          height: 20px;
          color: #ef7a97;
          cursor: pointer;
        }
        span:hover {
          color: #fa275c;
        }
      }

      .bottom {
        display: flex;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 300px;
          height: 540px;
          padding-top: 27px;
          background-image: url(https://www.wust.edu.cn/_upload/tpl/01/2d/301/template301/images/lbbj.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .img {
            width: 240px;
            height: 400px;
            cursor: pointer;
            margin-right: 7px;
          }
          span {
            margin-top: 33px;
            font-size: 18px;
            cursor: pointer;
            text-align: center;
            color: #fe4fb0;
            line-height: 25px;
          }
          span:hover {
            color: #fa275c;
          }
        }
      }
    }
  }
}
</style>
